<template>
  <div class="login_box_container">
    <!-- 头部 -->
    <div class="header_logo">
      <!-- 返回盒子 -->
      <div class="return_box">
        <van-icon name="arrow-left" @click="onClickGo" />
      </div>
      <!-- logo盒子 -->
      <div class="logo_box">
        <div class="logo">
          <img :src="this.logo" alt="" />
        </div>
      </div>
    </div>
    <!-- 手机登录 -->
    <div class="from_login">
      <div class="from">
        <!-- 手机号 -->
        <div class="input">
          <div class="icon_box">
            <img src="../assets/img/icon1.png" alt="" />
          </div>
          <div class="input_box">
            <input type="text" placeholder="请输入手机号" v-model="mobile" />
            <button v-show="show" @click="onClickGain">获取验证码</button>
            <button v-show="!show" @click="onClickGain">
              获取验证码{{ count }}
            </button>
          </div>
        </div>
        <!-- 验证码1 -->
        <div class="input">
          <div class="icon_box">
            <img src="../assets/img/icon2.png" alt="" />
          </div>
          <div class="input_box">
            <input
              type="text"
              placeholder="请输入验证码"
              v-model="securitycode"
            />
          </div>
        </div>
        <!-- 验证码2 -->
        <div class="input">
          <div class="icon_box">
            <img src="../assets/img/icon2.png" alt="" />
          </div>
          <div class="input_box">
            <input type="text" placeholder="请输入验证码" v-model="captcha" />
            <img :src="this.img" alt="" @click="onClick" />
          </div>
        </div>
      </div>
    </div>
    <div class="botton_box">
      <button @click="login">登录</button>
    </div>
    <div class="statement">
      <div class="left">未注册的手机号码将自动注册</div>
      <div class="right">密码登录</div>
    </div>
  </div>
</template>

<script>
import {
  getLogin,
  getverificationCode,
  getmobile,
  getlogin,
} from "../http/api";
export default {
  data() {
    return {
      logo: "",
      img: "",
      mobile: "",
      securitycode: "",
      captcha: "",
      keys: "",
      show: true,
      count: "",
      timer: null,
    };
  },
  created() {
    this.getlogins();
    this.getCode();
  },
  methods: {
    onClickGo() {
      this.$router.go(-1);
    },
    async getlogins() {
      const res = await getLogin();
      console.log(res);
      this.logo = res.data.data.site_logo;
    },
    //手机验证码
    async onClickGain() {
      const res = await getmobile({ mobile: this.mobile, sms_type: "login" });
      console.log(res);
      this.time();
    },
    //手机验证码倒计时一分钟
    time() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    //图片验证码
    async getCode() {
      const res = await getverificationCode();
      console.log(res);
      this.img = res.data.data.url.img;
      this.keys = res.data.data.url.key;
      console.log(this.keys);
    },
    // 切换图片验证码
    onClick() {
      this.getCode();
    },

    // 登录
    async login() {
      const res = await getlogin({
        mobile: this.mobile,
        sms_code: this.securitycode,
        captcha: this.captcha,
        device_id: "1",
        device_type: "2",
        user_pass: "000000",
        key: this.keys,
      });
      console.log(res);
      this.$store.commit("onmobile", this.mobile);
      sessionStorage.setItem("token", res.data.data.remember_token);
      this.$router.push({ path: "/personal" });
    },
  },
};
</script>

<style lang="scss">
.login_box_container {
  width: 100vw;
  height: 100vh;
  .header_logo {
    width: 100%;
    height: 3.5rem;
    background-color: #fff;
    .return_box {
      width: 100%;
      height: 20%;
      //   background-color: skyblue;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      i {
        font-size: 25px;
        color: #ccc;
      }
    }
    .logo_box {
      width: 100%;
      height: 80%;
      //   background-color: steelblue;
      display: flex;
      justify-content: center;
      align-items: center;
      .logo {
        width: 70%;
        height: 60%;
        // background-color: green;
        img {
          width: 100%;
          height: 80%;
        }
      }
    }
  }
  .from_login {
    width: 100%;
    height: 3.3rem;
    // background-color: firebrick;
  }
  .from {
    width: 90%;
    height: 100%;
    // background-color: slateblue;
    margin: 0 auto;
  }
  .input {
    width: 100%;
    height: 1rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    display: flex;
    margin-top: 5px;
    .icon_box {
      width: 10%;
      height: 100%;
      //   background-color: red;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 25px;
        height: 25px;
      }
    }
    .input_box {
      width: 90%;
      height: 100%;
      //   background-color: skyblue;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(250, 245, 245);
      input {
        width: 80%;
        height: 60%;
        border: none;
        font-size: 16px;
      }
      button {
        width: 100px;
        height: 30px;
        font-size: 12px;
        background-color: #f18d00;
        color: #fff;
        border: none;
        outline: none;
      }
    }
  }
  .botton_box {
    width: 100%;
    height: 1rem;
    // background-color: forestgreen;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      width: 90%;
      height: 90%;
      background-color: #f18d00;
      color: #fff;
      font-size: 20px;
      border-radius: 5px;
      border: none;
      outline: none;
    }
  }
  .statement {
    width: 90%;
    height: 0.5rem;
    // background-color: forestgreen;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    .left {
      width: 70%;
      height: 60%;
      font-size: 12px;
      color: rgb(167, 165, 165);
    }
    .right {
      width: 18%;
      height: 60%;
      font-size: 12px;
      color: rgb(167, 165, 165);
    }
  }
}
</style>